<template>
  <div>
    <div id="myEchart" style="height: 40vh; width: 100%" ref="pieCharts"></div>
  </div>
</template>
<script>
require("echarts/theme/macarons"); // echarts theme
import resize from "./mixins/resize";
import * as echarts from "echarts";
import "echarts-wordcloud/dist/echarts-wordcloud";
import "echarts-wordcloud/dist/echarts-wordcloud.min";
export default {
  mounted() {
    this.initEchart();
  },
  methods: {
    initEchart() {
      const echartDom = document.getElementById("myEchart");
      const myChart = echarts.init(echartDom);
      const option = {
        series: [
          {
            type: "wordCloud",
            shape: "circle",
            keepAspect: false,
            // maskImage: maskImage,
            left: "center",
            top: "center",
            width: "100%",
            height: "90%",
            right: null,
            bottom: null,
            sizeRange: [12, 60],
            rotationRange: [-90, 90],
            rotationStep: 45,
            gridSize: 8,
            drawOutOfBound: false,
            layoutAnimation: true,
            textStyle: {
              fontFamily: "sans-serif",
              fontWeight: "bold",
              color: function () {
                return (
                  "rgb(" +
                  [
                    Math.round(Math.random() * 160),
                    Math.round(Math.random() * 160),
                    Math.round(Math.random() * 160),
                  ].join(",") +
                  ")"
                );
              },
            },
            emphasis: {
              // focus: 'self',
              textStyle: {
                textShadowBlur: 3,
                textShadowColor: "#333",
              },
            },
            //data属性中的value值却大，权重就却大，展示字体就却大
            data: [
              {
                name: "花鸟市场",
                value: 1446,
              },
              {
                name: "汽车",
                value: 928,
              },
              {
                name: "视频",
                value: 906,
              },
              {
                name: "电视",
                value: 825,
              },
              {
                name: "Lover Boy 88",
                value: 514,
              },
              {
                name: "动漫",
                value: 486,
              },
              {
                name: "音乐",
                value: 53,
              },
              {
                name: "直播",
                value: 163,
              },
              {
                name: "广播电台",
                value: 86,
              },
              {
                name: "戏曲曲艺",
                value: 17,
              },
              {
                name: "演出票务",
                value: 6,
              },
              {
                name: "给陌生的你听",
                value: 1,
              },
              {
                name: "资讯",
                value: 1437,
              },
            ],
          },
        ],
      };
      option && myChart.setOption(option);

      //随着屏幕大小调节图表
      window.addEventListener("resize", () => {
        myChart.resize();
      });
    },
  },
};
</script>
